import React, {useEffect, useState} from 'react';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-form';
import ProFormItem from "@ant-design/pro-form/lib/components/FormItem";
import {TreeSelect} from "antd";
import {queryEnumRule} from "@/pages/Rule/service";


export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  // 远程加载配置
  const [menus,setMenus] = useState([]);

  useEffect(() => {
    queryEnumRule({authOpen:1}).then((res) => {
      // 如果响应成功
      if(res.status === 'ok'){
        setMenus(res.data);
      }
    });
  }, []);
  return (
    <ModalForm
      width={640}
      modalProps={{
        onCancel: () => {
          props.onCancel();
        },
        destroyOnClose: true,
      }}
      title="修改"
      visible={props.updateModalVisible}
      onFinish={props.onSubmit}
      initialValues={{
        id: props.values.id,
        name: props.values.name,
        pid: props.values.pid,
        path: props.values.path,
        icon: props.values.icon,
        sort: props.values.sort,
        type: parseInt(props.values.type).toString(),
        status: parseInt(props.values.status).toString(),
      }}
    >
      <ProFormText
        width="sm"
        name="id"
        disabled
        hidden
      />
      <ProFormItem
        name="pid"
        label="上级权限"
        tooltip="顶级权限直接留空"
        style={{width:'40%'}}
      >
        <TreeSelect
          showSearch
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          placeholder="请选择上级权限可以根据权限id搜索"
          allowClear
          treeDefaultExpandAll
          treeData={menus}
        />
      </ProFormItem>
      <ProFormText
        label="权限名"
        width="md"
        name="name"
        rules={[
          {
            required: true,
            message: '不能为空',
          },
        ]}
      />
      <ProFormText
        label="控制器/方法"
        width="md"
        name="path"
        tooltip="格式：AdData/index"
      />
      <ProFormText
        label="图标"
        width="md"
        name="icon"
        tooltip="使用antd pro 官方图标，可以直接复制保留文字使用"
      />
      <ProFormSelect
        name="type"
        width="sm"
        label="权限类型"
        valueEnum={{
          1: '菜单',
          2: '按钮',
        }}
      />
      <ProFormSelect
        name="status"
        width="sm"
        label="权限状态"
        valueEnum={{
          0:'禁用',1:'需要验证',2:'不需要验证'
        }}
      />
      <ProFormText
        label="排序"
        width="sm"
        name="sort"
      />

    </ModalForm>
  );
};

export default UpdateForm;
